<template>
  <view class="box">
    <view class="Top">
      <view class="Top_personage">
        <view class="personage" >
          <image class="head_portrait" :src="formList.avatar"/>
          <view class="message">
            <view>昵称:{{ formList.nickName }}</view>
          </view>
          <view>
            <!-- 个人信息 -->
            <navigator url="/subpkg_user/personage/personage" class="information">
		更改个人信息
        </navigator>
          </view>
       
        </view>
      </view>
      <view class="set">
        <uni-icons type="gear-filled" size="30"></uni-icons>
        <navigator url="/subpkg_set/install/install" >
			设置
        </navigator>
      </view>
    </view>
    <!-- 我的任务模块 -->
    <view class="personal_task">
      <view class="personal_assignment">
        <view style="color: #818181; text-align: center;">--我的任务--</view>
        <view class="personal_quantity">
          <view class="quantity">任务数量</view>
          <view class="quantity">完成数量</view>
          <view class="quantity">18</view>
          <view class="quantity">16</view>
         
        </view>
      </view>
    </view>
    <uni-section title="工单反馈" type="line">
      <uni-card :is-shadow="false">
        <view class="feedback">
          <view class="row">
            <view class="item">
              <uni-icons type="settings-filled" size="30" color="#fcd459"></uni-icons>
              <text class="label">全部</text>
            </view>
            <view class="item">
              <uni-icons type="bars" size="30" color="#e7705d"></uni-icons>
              <text class="label">处理中</text>
            </view>
            <view class="item">
              <uni-icons type="calendar-filled" size="30" color="#0059ff"></uni-icons>
              <text class="label">已完成</text>
            </view>
          </view>
        </view>
      </uni-card>
    </uni-section>
    <uni-section title="查堪工单" type="line">
      <uni-card :is-shadow="false">
        <view class="feedback">
          <view class="row">
            <view class="item">
              <uni-icons type="settings" size="30" color="#fcd459"></uni-icons>
              <text class="label">全部</text>
            </view>
            <view class="item">
              <uni-icons type="spinner-cycle" size="30" color="#e7705d"></uni-icons>
              <text class="label">查堪中</text>
            </view>
            <view class="item">
              <uni-icons type="calendar-filled" size="30" color="#0059ff"></uni-icons>
              <text class="label">已完成</text>
            </view>
          </view>
        </view>
      </uni-card>
    </uni-section>
  </view>
</template>
<script setup>
	import { ref } from "vue";
	import userApi from '@/api/user'
	const formList=ref({})
  async function userinfo() {
  const res=await userApi.userinfo()
  formList.value=res.data
  console.log(res);
  formList.value=res.data
}
userinfo()
</script>

<style>
/* 外盒子 */
.box {
  width: 100vw;
  height: 100vh;
  position: relative;
  background-color: #f4f4f4;
}

/* 头部样式 */
.Top {
  width: 100vw;
  height: 40vh;
  background-color: brown;
  border-bottom-left-radius: 20%;
  border-bottom-right-radius: 20%;
}

/* 司机信息 */
.Top_personage {
  position: relative;
  display: flex;
  justify-content: space-between;
  width: 80vw;
  height: 30vh;
  margin-left: 10%;
  text-align: center;
  padding-top: 20px;
}

/* 头像 */
.head_portrait {
  width: 70px;
  height: 70px;
  background-color: aliceblue;
  background-image: url('https://img.zcool.cn/community/016a2e5f110b9fa801215aa097202c.png@1280w_1l_2o_100sh.png');
  border: 2px solid #ffffff;
  border-radius: 50%;
}

.message {
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: #ffffff;
}

/* 任务模块样式 */
.personal_task {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  height: 50%;
  border-radius: 5%;
}

.personal_assignment {
  width: 100%;
  height: 25%;
  background-color: #fff;
  border: 1px solid #fff;
  border-radius: 10px;
  margin-bottom: 10px;
  /* padding-top: 10px; */
}

/* 任务数量 */
.personal_quantity {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  text-align: center;
}

.quantity {
  margin-top: 5px;
  width: 50%;
}

/* 个人中心 */
.personal_personage {
  width: 100%;
  height: 55%;
  background-color: #fff;
  border: 1px solid #fff;
  border-radius: 5%;
  margin-bottom: 20px;
}

.personal_data {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #818181;
  margin-top: 10px;
}

.feedback {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 100%;
  margin-top: 20px;
}

.item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.label {
  font-size: 14px;
  color: #000000;
  text-align: center;
}

.personage {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.set {
  width: 70px;
  height: 30px;
  border: 1px solid #fff;
  background-color: #ffffff;
  opacity: 0.8;
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 10px;
  left: 80%;
  transform: translate(0px, 0px);
}
.information{
  color: orange;
  width: 100px;
  margin-left: 20px;
}
</style>
